/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
 <div class="map-content">
    <v-chart auto-resize :options="mapOption" ref="char-6" theme="macarons"/>
 </div>
</template>

<script>
import ECharts from "vue-echarts";
import mapData from "../../assets/map.json";
import lodash from "lodash";

let newData = lodash.cloneDeep(mapData);

export default {
  data() {
    return {
      mapOption: {}
    };
  },
  components: {
    "v-chart": ECharts
  },
  methods: {
    initMapOption() {
      this.mapOption = {
        geo: {
          map: "wujiagang",
          //视角缩放比例
          zoom: 1.2,
          //鼠标缩放和平移
          roam: true,
          // itemStyle: {
          //   areaColor: "#00baf0"
          // }
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(175,238,238, 0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(	47,79,79, .8)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "USA PopEstimates",
            type: "map",
            roam: true
            // map: "wujiagang"
          }
        ]
      };
    }
  },
  mounted() {
    ECharts.registerMap("wujiagang", mapData, {});
    this.initMapOption();
  }
};
</script>

<style lang='less' scoped>
.map-content {
  width: 100%;
  height: 100%;
}
</style>
